﻿@{
    ViewBag.Title = "User";
    Layout = "~/Views/Shared/_Layout.cshtml";  
    @Scripts.Render("~/bundles/userjs")

    <!-- page level plugin styles -->@*
    
    <script src="plugins/chosen/chosen.jquery.min.js"></script>
    <script src="plugins/datatables/jquery.dataTables.js"></script>
    <script src="/js/bootstrap-datatables.js"></script>
    <script src="/js/table-edit.js"></script>*@
}
<div data-ng-app data-ng-controller="userController" class="container">
    <strong class="error">{{ error }}</strong>
    <div id="mydiv" data-ng-show="loading">
        <img src="/Images/ajax-loader.gif" class="ajax-loader" />
    </div>

    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>UserName</th>
                <th>Password</th>
                <th>Email</th>
                <th>Full Name</th>
                <th>City</th>
                <th>Telephone</th>
                <th>Fax</th>
                <th>Pincode</th>
                <th>IsActive</th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="user in users | filter:'1234'">
                <td><strong data-ng-hide="user.editMode">{{ user.Id }}</strong></td>
                <td>
                    <p data-ng-hide="user.editMode">{{ user.UserName }}</p>
                    <input data-ng-show="user.editMode" type="text" data-ng-model="user.UserName" style="width:80px" />
                </td>
                <td>
                    <p data-ng-hide="user.editMode">{{ user.Password }}</p>
                    <input data-ng-show="user.editMode" type="text" data-ng-model="user.Password" style="width:80px" />
                </td>
                <td>
                    <p data-ng-hide="user.editMode">{{ user.Email }}</p>
                    <input data-ng-show="user.editMode" type="text" data-ng-model="user.Email" style="width:80px" />
                </td>
                <td>
                    <p data-ng-hide="user.editMode">{{ user.FullName }}</p>
                    <input data-ng-show="user.editMode" type="text" data-ng-model="user.FullName" style="width:100px" />
                </td>
                <td>
                    <p data-ng-hide="user.editMode">{{ user.Role }}</p>
                    <input data-ng-show="user.editMode" type="text" data-ng-model="user.Role" style="width:80px" />
                </td>
                <td>
                    <p data-ng-hide="user.editMode">{{ user.Telephone }}</p>
                    <input data-ng-show="user.editMode" type="text" data-ng-model="user.Telephone" style="width:80px"  />
                </td>
                <td>
                    <p data-ng-hide="user.editMode">{{ user.Fax }}</p>
                    <input data-ng-show="user.editMode" type="text" data-ng-model="user.Fax" style="width:80px" />
                </td>
                <td>
                    <p data-ng-hide="user.editMode">{{ user.PinCode }}</p>
                    <input data-ng-show="user.editMode" type="text" data-ng-model="user.PinCode" style="width:50px" />
                </td>
                <td>
                    <p data-ng-hide="user.editMode">{{ user.Active }}</p>
                    <input data-ng-show="user.editMode" type="checkbox" data-ng-model="user.Active" style="width:20px" />
                </td>
                <td>
                    <p data-ng-hide="user.editMode"><a data-ng-click="toggleEdit(user)" href="javascript:;">Edit</a> | <a data-ng-click="deleteUser(user)" href="javascript:;">Delete</a></p>
                    <p data-ng-show="user.editMode"><a data-ng-click="save(user)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(user)" href="javascript:;">Cancel</a></p>
                </td>
            </tr>
        </tbody>
    </table>
</div>
